<template>
  <div class="report-wrapper">
    <div class="search-wrapper">
      <px-form ref="queryRef" class="custom-form-ui" :model="queryParams" inline label-width="90px">
        <px-form-item label="时间" prop="timeRange" style="width: 420px">
          <px-date-picker
            v-model="queryParams.timeRange"
            clearable
            type="daterange"
            range-separator="至"
            start-placeholder="请选择开始时间"
            end-placeholder="请选择结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </px-form-item>

        <px-form-item class="option-item">
          <px-button type="primary" @click="searchAction">查询</px-button>
          <px-button v-has="'ELECTRICTITY_REPORT_ELEVATOR_EXPORT'" type="primary" plain @click="exportAction">导出</px-button>
          <!-- <px-button @click="resetQuery">重置</px-button> -->
        </px-form-item>
      </px-form>
    </div>
    <div class="frame-wrapper">
      <iframe id="reportFrame" :src="templateUrl" width="100%" height="95%" frameborder="0" />
    </div>
    <ReTeleport>
      <div class="op-btns footer-btns">
        <div class="right"><px-button v-has="'ELECTRICTITY_REPORT_ELEVATOR_SUBMIT'" type="primary" @click="submitAction">提交</px-button></div>
      </div>
    </ReTeleport>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, toRefs, ref, computed, nextTick } from "vue";
import { PxMessage, PxMessageBox } from "px-ui";
import { useRouter, useRoute } from "vue-router";
import { useNav } from "@/layout/hooks/useNav";
import dayjs from "dayjs";
import { getToken } from "@/utils/auth";
import ReTeleport from "@/components/ReTeleport";

defineOptions({
  name: "ELECTRICITY_REPORT_ELEVATOR"
});

const { username } = useNav();
const router = useRouter();
const route = useRoute();

const writeSingleCode = ref();
const templateUrl = ref();

const queryParams = reactive({
  timeRange: ""
});

const addLineAction = () => {
  document.getElementById("reportFrame").contentWindow.postMessage("_g().clickAddLineButton", "*");
};
const deleteLineAction = () => {
  document.getElementById("reportFrame").contentWindow.postMessage("_g().clickDeleteLineButton", "*");
};

const submitAction = () => {
  document.getElementById("reportFrame").contentWindow.postMessage("_g().verifyAndWriteReport()", "*");
};
// importExcel_Clean清空导入
// importExcel_Append 增量导入
// importExcel_Cover 覆盖导入
const importAction = () => {
  document.getElementById("reportFrame").contentWindow.postMessage("_g().importExcel_Cover()", "*");
};
const exportAction = () => {
  document.getElementById("reportFrame").contentWindow.postMessage("_g().exportReportToExcel('simple')", "*");
};
const { VITE_FANRUAN_BASE_URL } = import.meta.env;
const getUrl = () => {
  let tpName = encodeURIComponent(encodeURIComponent("reportCenter/electrictity/电梯运行状态表.cpt"));
  let baseUrl = `${window.location.protocol}//${window.location.hostname}:8443/webroot/decision/view/report?viewlet=${tpName}&user=${username.value}&__pi__=false&op=write&facCode=${localStorage.getItem("facCode") || ""}`;
  let startDate = queryParams?.timeRange?.[0] || "";
  let endDate = queryParams?.timeRange?.[1] || "";
  if (route.query.singleCode || writeSingleCode.value) {
    baseUrl = `${baseUrl}&singleCode=${route.query.singleCode || writeSingleCode.value}`;
  }
  if (startDate && endDate) {
    let atoken = getToken().accessToken || "";
    baseUrl = `${baseUrl}&startDate=${startDate}&endDate=${endDate}&token=${atoken}&ifpHost=${window.location.protocol}//${window.location.hostname}`;
  }
  templateUrl.value = baseUrl;
};
onMounted(() => {
  let ym = new Date();
  // 获取当前月份第一天
  let firstDayOfMonth = dayjs(new Date(ym.getFullYear(), ym.getMonth(), 1)).format("YYYY-MM-DD");
  // 获取当前月份最后一天
  let lastDayOfMonth = dayjs(new Date(ym.getFullYear(), ym.getMonth() + 1, 0)).format("YYYY-MM-DD");
  if (route.query.date) {
    firstDayOfMonth = route.query.date;
    lastDayOfMonth = route.query.date;
  }
  queryParams.timeRange = [firstDayOfMonth, lastDayOfMonth];
  getUrl();
  window.addEventListener("message", function (event) {
    console.log(event);
    let o = `${window.location.protocol}//${window.location.hostname}:8443`;
    if (event.origin !== o) return;
    let code = JSON.parse(event.data)?.reportSingleCode;
    if (code) {
      writeSingleCode.value = code;
      getUrl(true);
    }
  });
});

const searchAction = () => {
  getUrl();
};
</script>
<style scoped lang="scss">
.report-wrapper {
  padding: 16px;
  overflow: hidden;
  background: #fff;
  border-radius: 4px;
}

.frame-wrapper {
  position: relative;
  height: calc(100vh - 270px);
  overflow-y: hidden;
}

.template-content {
  width: 100%;
  background-color: #fff;
}

.op-btns {
  display: flex;
  padding: 16px 0;
  background-color: #fff;

  .left {
    flex: 1;
    text-align: left;
  }

  .center {
    flex: 1;
    text-align: center;
  }

  .right {
    flex: 1;
    text-align: right;
  }
}

.footer-btns {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding: 16px;
}
</style>
